<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="../../include/easyui.jsp" %>
<%@ include file="../../include/pGrid.jsp" %>
<script type="text/javascript" charset="utf-8" src="/plug-in/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/plug-in/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/plug-in/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="/plug-in/ueditor/jformdesign/formdesign.v4.js?a=dddadf444d"></script>
<script type="text/javascript" charset="utf-8" src="/plug-in/ueditor/jformdesign/jform_design.js"></script>
<style type="text/css">
	.toolbar{padding: 10px;}
	.toolbar .item{margin-top: 5px;}
	.easyui-linkbutton{width: 120px;}
</style>
<title>流程表单</title>
<script>
$(function() {
	if(formDesign){
		formDesign.init({
			formId: '${param.formId}',
			PATH: CP
		});
	}
	
	/*左侧控件调用*/
	$(".toolbar .easyui-linkbutton").on("click",function(){
		var $this = $(this);
		var pluginsname = $this.attr("pluginsname");
		if(UE.plugins[pluginsname]){
			formDesign.exec(pluginsname);
		}else{
			alert('未提供此方法'+ pluginsname);
		}
	});
	
	/*表单属性列表加载*/
	$('#dataGrid').datagrid({    
		idField:'fieldname',
		singleSelect: false,
		rownumbers: true,
	    url:'/console/jForm/rewrite/getFormDataGrid?formId=${param.formId}',    
	    columns:[[    
	        {field:'fieldname',title:'字段名称',width:100},    
	        {field:'title',title:'显示名称',width:100},    
	        {field:'fieldflow',title:'流程变量',width:100},    
	        {field:'orghide',title:'隐藏',width:100},    
	        {field:'orgalign',title:'对齐方式',width:100},    
	        {field:'plugins',title:'控件类型',width:100},    
	        {field:'orgfontsize',title:'字体',width:100},    
	        {field:'orgheight',title:'高度',width:100},    
	        {field:'orgwidth',title:'宽度',width:100},    
	        {field:'orgtype',title:'数据类型',width:100},    
	        {field:'type',title:'输入类型',width:100},    
	        {field:'orgrich',title:'富文本',width:100},    
	        {field:'style',title:'样式',width:200},    
	        {field:'name',title:'元素名称',width:100},    
	        {field:'value',title:'默认值',width:100} 
	    ]]    
	});  

	
});
</script>
</head>
<body class="easyui-layout">
	<form name="saveform" id="saveform" action="" style="display: none;" method="post">
		<input name="formId" value="${param.formId}"/>
		<textarea name="editorContent"></textarea>
		<input type="hidden" id="fields" value="${design.fields}" />
	</form>

    <div data-options="region:'west',title:'表单控件',split:true" style="width:200px;">
    	<div class="toolbar">
    		<div class="item">
	    		<a pluginsname="text"  href="#" class="easyui-linkbutton" data-options="">文本框</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="textarea" href="#" class="easyui-linkbutton" data-options="">多行文本</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="select" href="#" class="easyui-linkbutton" data-options="">下拉菜单</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="radios" href="#" class="easyui-linkbutton" data-options="">单选框</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="checkboxs" href="#" class="easyui-linkbutton" data-options="">复选框</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="macros" href="#" class="easyui-linkbutton" data-options="">宏控件</a>  
    		</div>
    		<!-- 
    		<div class="item">
	    		<a pluginsname="progressbar" href="#" class="easyui-linkbutton" data-options="">进度条</a>  
    		</div>
    		<div class="item">
	    		<a pluginsname="qrcode" href="#" class="easyui-linkbutton" data-options="">二维码</a>  
    		</div>
    		 -->
    		<div class="item">
	    		<a pluginsname="listctrl" href="#" class="easyui-linkbutton" data-options="">列表控件</a>  
    		</div>
    	</div>	
    </div>   
    <!-- 
	<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
     -->
    <div data-options="region:'south',split:true,collapsible:false" style="height:150px;text-align:center;">
    	<div style="padding: 10px;">
    		<table id="dataGrid" title="表单元素列表" style="width:100%;height:100px;"></table>
    		<!-- 
	        <a id="btnSave" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
    		 -->
    	</div>
    </div>   
    <!-- 
   <div data-options="region:'east',iconCls:'icon-reload',title:'属性设计',split:true" style="width:300px;">
   		<table id="propGrid" style="width:290px;"></table>  
   </div>
     -->
    <div data-options="region:'center'" style="background:#eee;" id="centerDiv">
		<script type="text/plain" id="formEditor" style="margin:25px;">${design.template}</script>
    </div>   
</body>
</html>
